<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <treedata :data="trdt" @addcompany="addcompany" />
        <hr>
        <el-tree :data="tree" :default-expand-all="true" :props="{lable:'position'}">
          <template #default="obj">
            <treedata :data="obj.data" @delcompany="delcompany" @addcompany="addcompany" @editcompany="editcompany" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <adddialog ref="dialog" :dialogdata="dialogdata" @addCompanyData="addCompanyData" />
  </div>
</template>

<script>
import treedata from '@/views/departments/components/treedata.vue'
import adddialog from '@/views/departments/components/adddialog.vue'
import { getCompanyLists } from '@/api/departments'
import { companylists } from '@/utils/index'
export default {
  components: {
    treedata,
    adddialog
  },
  data() {
    return {
      trdt: {
        name: '隔壁老王的公司',
        manager: '负责人',
        company: true
      },
      tree: [
      ],
      dialogdata: {
        ishow: false,
        pid: ''
      }
    }
  },
  created() {
    this.companylist()
  },
  methods: {
    async companylist() {
      const { depts } = (await getCompanyLists()).data
      this.tree = await companylists(depts, '')
    },
    delcompany() {
      this.companylist()
    },
    addcompany(pid) {
      this.dialogdata.ishow = true
      this.dialogdata.pid = pid
    },
    addCompanyData() {
      this.companylist()
    },
    editcompany(id) {
      this.dialogdata.ishow = true
      this.$refs.dialog.getcompany(id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
